<template>
  <div class="hello" v-cloak>
    <h1>{{ msg }}</h1>
    <List></List>
    <hr>
    <div class="t">
      <input type="text" v-model="text" @keydown.enter="add()">
      <button class="btn" @click="add()">添加</button>
    </div>
    <div class="show">
      <p v-for="(v,index) in arr" :key="index">
        <span>{{v}}</span>
      </p>
    </div>
    <hr>
    <div>
      单价：<input type="text" v-model="price"><br>
      数量：<input type="text" v-model="count"><br>
      总计：<input type="text" v-model="sum">
    </div>
    <div>
      <p v-for="(v,index) in list" :key="index">
        {{v.uname}}-{{v.sex | sexs | sexs1  }}
      </p>
    </div>
  </div>
</template>

<script>
//1.引入组件
import List from "@/components/List"

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      current:1,
      text:"",
      arr:[],
      price:1000,
      count:2,
      list:[
        {uname:"小刚",sex:1},
        {uname:"小海",sex:1},
        {uname:"小红",sex:0},
        {uname:"小莉",sex:0},
      ]
    }
  },
  //2.注册组件
  components:{List},

  methods: {
    add(){
        if(this.text){
          this.arr.unshift(this.text);
          this.text="";
          var t=JSON.stringify(this.arr);
          sessionStorage.setItem("text",t);
        }
    }
  },
  mounted(){
    if (sessionStorage.getItem("text")) {
      var t1=JSON.parse(sessionStorage.getItem("text"));
      this.arr=t1;
    }
  },
  computed:{
    sum:{
      get(){
        return this.price*this.count;
      },
      set(v){
        this.count=v/this.price;
      }
    }
  },
  filters:{
    sexs(myValue,args){
      return myValue==0?"女":"男"
    },
    sexs1(myValue){
      return myValue == '女' ? myValue +"♀" : myValue +"♂"
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
        [v-cloak]{
          display: none;
        }
        .show{
          width:212px;
          border: 1px solid black;
          background-color:cyan;
          margin:auto;
          margin-top:2px;
  
        }
</style>
